今天針對要測試 Call API 是否符合預期來做了解，我們可以怎麼做。

Mocking Service Worker(MSW) 是什麼?
MSW 的基礎設定。

Mocking Service Worker(MSW) 是什麼?

昨天有提到 Jest Mocking 不會直接 Call API 進行測試。那如果我就是希望要測試 Call API 是否符合預期呢？

MSW 與 Jest Mock Functions 的差別：

MSW 的基礎設定

MSW 官網 提供的 SetUp 步驟很清楚，進行：

1. 安裝 MSW 至專案內。
2. 選擇 Node.js 作為 模擬 Server。

    // src/mocks/server.ts
    import { setupServer } from 'msw/node'
    import { handlers } from './handlers'

    // This configures a request mocking server with the given request handlers.
    export const server = setupServer(...handlers)

3. 設定 Mock Define: 用來確認有哪些 API 需要經過模擬測試。

• 我選擇 RESTiful API 進行模擬設置
• rest<API Method>(<Request URL>, <Resolver Functions>)
• Resolver Functions 包含三個參數：req, res, ctx
  • req : 模擬使用者 req 內容
  • res : 一個 function，模擬 Server 回傳資訊。
  • ctx : 提供多個回傳 statusCode、body、json data 等方法。

import { rest } from 'msw';

export const handlers = [
    rest.get("https://jsonplaceholder.typicode.com/users", (req, res, ctx) => {
        return(
            res(
                ctx.status(200),
                ctx.json([
                    {
                        "id": 1,
                        "name": "Leanne Graham",
                        "username": "Bret",
                        "email": "Sincere@april.biz",
                        "address": {
                          "street": "Kulas Light",
                          "suite": "Apt. 556",
                          "city": "Gwenborough",
                          "zipcode": "92998-3874",
                          "geo": {
                            "lat": "-37.3159",
                            "lng": "81.1496"
                          }
                        },
                        "phone": "1-770-736-8031 x56442",
                        "website": "hildegard.org",
                        "company": {
                          "name": "Romaguera-Crona",
                          "catchPhrase": "Multi-layered client-server neural-net",
                          "bs": "harness real-time e-markets"
                        }
                    },
                    ...
                ])
            )
        )
    })
];

參考資源

• React Testing Tutorial - 43 - Mocking HTTP Requests
• Jest: Mock Function
• User 假資料來源